<template>
	<view
		class="ac-keyborad-bar"
		:class="[props._class]"
		:style="[_style, props._style]"
		@click.stop="_onClick"
		@longpress="_onLongpress($event)"
	>
		<slot></slot>
	</view>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { pub_props, computedColor } from '@/uni_modules/ac-ui/utils/minxs/props';

const emits = defineEmits(['click', 'clickStop', 'longpress']);

const props = defineProps({
	...pub_props,
	color: {
		type: String,
	},
	darkColor: {
		type: String,
	},
	shadow: {
		type: [String, Number],
	},
	height: {
		type: Number,
	},
	linear: {
		type: Boolean,
		default: false,
	},
	border: {
		type: [String, Number],
	},
	borderColor: {
		type: String,
		default: 'gray-6',
	},
	borderDirection: {
		type: String,
		default: 'all',
	},
	_class: {
		type: [String, Array],
	},
	_style: {
		type: [Array, String, Object],
		default: () => [],
	},
});

const kayboardHeight = ref(0);

onMounted(() => {
	// #ifndef H5
	uni.onKeyboardHeightChange((res) => {
		kayboardHeight.value = res.height;
	});
	// #endif
});
const _class = computed(() => {
	if (typeof props._class === 'string') {
		return props._class;
	} else {
		return props._class.join(' ');
	}
});
const _style = computed(() => {
	let style = {};

	if (props.height) {
		style['height'] = props.height + 'rpx';
	}
	if (props.border) {
		let direction = props.borderDirection === 'all' ? '' : '-' + props.borderDirection;
		style[`border${direction}`] = `solid ${props.border}rpx`;
		style[`border${direction}-color`] = computedColor(props.borderColor, '', props.theme);
	}

	if (props.color && !props.linear) {
		style['background-color'] = computedColor(props.color, props.linear ? 'linear' : '', props.theme);
	}
	if (props.color && props.linear) {
		style['background-image'] = computedColor(props.color, props.linear ? 'linear' : '', props.theme);
	}
	if (props.shadow) {
		if (props.shadow == 1) {
			style['box-shadow'] = '0 2px 2px 0 #ccc';
		}
	}
	return style;
});

function _onClick(event) {
	emits('click', event);
}

function _onClickStop(event) {
	emits('clickStop', event);
}

function _onLongpress(event) {
	emits('longpress'.event);
}
</script>

<style scoped>
.ac-keyborad-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding: 12rpx 12rpx;
	position: fixed;
	bottom: 0px;
	flex: 1;
}
</style>
